import React,{ useState,useEffect } from 'react';
import '../Swiper/Addswiper.scss'
import { useNavigate } from 'react-router-dom';
import { Breadcrumb,Form,Input,Button,Card ,notification,message, Upload } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { banner_add } from '../../../api/api';
interface Props{

}
 
function Addswiper(props:Props) {
    var navigate = useNavigate();
    const [loading, setLoading] = useState(false);
    var [img,setImg] =  useState<any>('');
    const [form] = Form.useForm();
    var onChange = (e:any)=>{
        
        console.log(e.target.files[0]);
        
        //将文件对象转换为base64编码后的字符串
        //FileReader专门负责读取文件内容,转换为其他格式
        var reader = new FileReader();
        reader.readAsDataURL(e.target.files[0])
        reader.onload = function(){
            console.log(this.result);
            //this.result 拿到的是所选中的文件的全部内容(以base64编码格式显示的字符串)
            // setImg(this.result)
            form.setFieldValue('img',this.result); 
        }
      
        
        
    }
    const onFinish = (values:any)=>{
      var {img2,...values} = values
      banner_add(values).then((res)=>{
          console.log(values);
          if(res.data.code == 200){
            notification.success({message:'新增轮播图成功'})
            navigate('/index/swiper')
          }else{
            notification.error({message:res.data.message})
          }
          
      })

  }

    return (
        <div className='addswiper'>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
              <Breadcrumb.Item>轮播图管理</Breadcrumb.Item>
              <Breadcrumb.Item>添加轮播图</Breadcrumb.Item>
            </Breadcrumb>
            <Card>
                <Form
                 labelCol={{ span: 6 }}
                 wrapperCol={{ span: 8 }}
                 onFinish={onFinish}
                 form={form}
                 >
    
                     <Form.Item
                         label="link"
                         name="link"
                         rules={[{ required: true, message: '输入link' }]}
                     >
                         <Input placeholder='输入link'/>
                     </Form.Item>
                     <Form.Item
                         label="alt"
                         name="alt"
                         rules={[{ required: true, message: '输入alt' }]}
                     >
                         <Input placeholder='输入alt'/>
                     </Form.Item>
                <Form.Item 
                    label="选择图片"
                    name="img2"
                    rules={[{  message: '请输入图片的alt' }]}
                    >
                    <Input type='file' onChange={onChange}/>
                </Form.Item>
                     <Form.Item
                         label="base64"
                         name="img"
                         rules={[{ required: true, message: '输入base' }]}
                     >
                         <Input placeholder='选择图片后自动填充'/>
                     </Form.Item>
    
    
                  
    
                     <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                         <Button type="primary" htmlType="submit">提交</Button>
                     </Form.Item>
                 </Form>
            </Card>
        </div>
    );
}

export default Addswiper;